<template>
  <div class="video">
    <div class="top">
      <div click="videoShow" @click="details()">
        <img :src="ip+data.pictures[0].url" alt="">
        <span>
          <yd-icon name="videoPlay" custom slot="icon" size="0.5rem"></yd-icon>
        </span>
        <p>{{data.profile}}</p>
      </div>

    </div>
    <div class="bottom">
      <div class="left">
        <img :src="data.userPhoto" @click="personageDetails()">
        <span @click="personageDetails()">{{data.userName}}</span>
      </div>
      <div class="right">
        <div @click="follow()">
          <yd-icon name="follow" custom slot="icon" size="0.4rem"></yd-icon>
          <span>关注</span>
        </div>
        <div>
          <yd-icon name="comment" custom slot="icon" size="0.4rem"></yd-icon>
          <span>0</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    props: ['data'],
    components: {},
    data() {
      return {
        show: true,
        datas: null,
        ip:this.$store.state.ip
      }
    },
    methods: {
      personageDetails() {  //往人物详情跳转

      },
      follow() {   //动态关注
        alert('暂时还没有添加功能')
      },
      details() {   //判断文章类型后往文章内容跳转
        var con = '';
        var contentType = this.data.contentType;
        switch (contentType) {
          case 'News':
            con = 'news';
            break;
          case 'Text':
            con = 'text';
            break;
          case 'Video':
            con = 'video';
            break;
        }
        let data = {
          id: this.data.id,
        };
        this.$dialog.loading.open('正在加载数据');
        this.ylAjax.video(data).then(msg => {  //查询单条视频动态
          this.$store.commit('videoContent',msg.data)

          this.$dialog.loading.close();
          this.$router.push({name: con + 'Content', params: {data: msg.data}})
        });
//        setTimeout(() => {  //延时500毫秒以方便获取视频动态数据
//
//        }, 500)

      },
    },

    created() {
//      console.log(this.data)
    },
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .video {
    width: 100%;
    height: 5rem;
    margin-bottom: 0.1rem;
    > .top {
      width: 100%;
      height: 4rem;
      position: relative;
      > div {
        height: 100%;
        > img {
          width: 100%;
          height: 100%;
        }
        >span{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          text-align: center;
          line-height: 1rem;
          background: rgba(0,0,0,0.5);
          i {
            color: #ffffff;
          }
        }

        p{
          color: #fff;
          position: absolute;
          top:0;
          padding: 0 0.4rem;
          font-size: 16px;
          width: 100%;
          height: 0.8rem;
          background:-webkit-gradient(linear, 0 0, 0 bottom, from(#767676), to(rgba(255, 255, 255, 0)));
        }
      }
      > .video {
        width: 100%;
        height: 100%;
        background: black;
        > video {
          width: 100%;
          height: 100%;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      position: relative;
      > div {
        float: left;
      }
      > .left {
        width: 50%;
        > img {
          width: 1rem;
          height: 1rem;
          border: 2px solid @read-userPic;
          border-radius: 50%;
          position: absolute;
          top: -0.8rem;
          left: 0.3rem;
        }
        > span {
          margin-left: 0.5rem;
        }
      }
      > .right {
        width: 50%;
        height: 100%;
        > div {
          width: 50%;
          height: 1rem;
          line-height: 1rem;
          float: left;
        }
      }

    }
  }
</style>
